<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item prop="studentId" label="学生" label-width="80px">
                <el-select v-model="form.studentId" placeholder="请选择课程">
                    <el-option v-for="item in students" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="courseId" label="课程" label-width="80px">
                <el-select v-model="form.courseId" placeholder="请选择课程">
                    <el-option v-for="item in courses" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="dailyScore" label="日常得分" label-width="80px">
                <el-input v-model="form.dailyScore" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="examScore" label="考试得分" label-width="80px">
                <el-input v-model="form.examScore" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="score" label="总分" label-width="80px">
                <el-input v-model="form.score" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end;">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </div>
</template>

<script>
import { stuCourseAdd, studentName, courseName } from '@/api/admin/stu_course';
export default {
    data() {
        return {
            dialogFormVisible: false,
            form: {
                studentId: "",
                courseId: "",
                dailyScore: "",
                examScore: "",
                score: "",
                id: -1
            },
            courses: [],
            students: [],
            rules: {
                studentId: [
                    { required: true, message: "请选择学生名称", trigger: 'change' }
                ],
                courseId: [
                    { required: true, message: "请选择课程名称", trigger: 'change' }
                ],
                dailyScore: [
                    { required: true, message: "请输入日常得分", trigger: 'blur' }
                ],
                examScore: [
                    { required: true, message: "请输入日常得分", trigger: 'blur' }
                ],
                score: [
                    { required: true, message: "请输入日常得分", trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        getStudent() {
            studentName().then(res => {
                // console.log(res)
                this.students = res.data
            })
        },
        getCourse() {
            courseName().then(res => {
                // console.log(res)
                this.courses = res.data
            })
        },
        submit() {

            this.$refs["form"].validate(f => {
                if (f) {
                    stuCourseAdd(this.form).then(res => {
                        if (res.code === 0) {
                            this.$message({
                                type: "success",
                                message: res.data
                            })
                            this.$emit("close")
                        }
                    }).catch(err => {
                        console.log(err)
                        this.$message({
                            type: "error",
                            message: "选课编号不能重复"
                        })
                    })
                }
            })
        },
        cancel() {
            this.$emit("cancelAdd")
        }
    },
    mounted() {
        this.getStudent()
        this.getCourse()
    }
}
</script>